<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    广告牌管理
                    <button type="button" class="btn btn-info pull-right " style="margin-left: 5px"
                            onclick="oceanModal.openDefault('billboard/item')">新增广告牌
                    </button>
                    <button type="button" class="btn btn-info pull-right" onclick="window.open('/billboard/listMap')">设备分布图</button>
                </header>
                <div class="col-lg-12">
                    <form id="adCompany_select_form">
                        <label style="color: #737B83;">所属市:</label>
                        <select style="width: 100px; margin-top: 10px;" id="city" name="city" onchange="districtIdSelect()">
                            <option value=""></option>
                            <c:forEach items="${city}" var="item">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>&nbsp;&nbsp;&nbsp;
                        <label style="color: #737B83;">所属区:</label>
                        <select style="width: 100px; margin-top: 10px;" id="district" name="district" onchange="streetIdSelect()">
                        </select>&nbsp;&nbsp;&nbsp;
                        <label style="color: #737B83;">所属街道:</label>
                        <select style="width: 100px; margin-top: 10px;" id="street" name="street">
                        </select>&nbsp;&nbsp;&nbsp;
                        <label style="color: #737B83;">门牌号或其他:</label>
                        <input type="text" class="txt" id="location" name="location" placeholder="位置的关键字"
                               style="margin-top: 10px;" required/>&nbsp;&nbsp;&nbsp;
                        <label style="color: #737B83;">状态:</label>
                        <select style="width: 100px; margin-top: 10px;" id="status" name="status">
                            <option value=""></option>
                            <option value="1">正常</option>
                            <option value="0">故障</option>
                        </select>&nbsp;&nbsp;&nbsp;
                        <input type="button" id="search" class="btn" onclick="billboardPage.select()" value="搜索"/>
                        <input type="reset" id="return" class="btn" onclick="load()" value="重置"/>
                    </form>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-bordered sortable">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>广告牌ID</th>
                            <th>广告牌名称</th>
                            <th>所属公司</th>
                            <th>设备位置</th>
                            <th>条形码</th>
                            <th>紧急联系人</th>
                            <th>报警手机号码</th>
                            <th>安装方式</th>
                            <th>安装年代</th>
                            <th>材质</th>
                            <th>面积</th>
                            <th>状态</th>
                            <th colspan="2">操作</th>
                        </tr>
                        </thead>
                        <tbody id="billboard-list-body">

                        </tbody>
                    </table>
                    <div class="text-center">
                        <ul class="pagination">

                        </ul>
                    </div>
                </div>
            </section>
        </div>
    </div>
</section>

<script type="text/template" id="billboard-list-template">
    <@ _.each(items, function (item) { @>
    <tr>
        <td><@= item.code @></td>
        <td><@= item.bid @></td>
        <td><@= item.name @></td>
        <td><@= item.adCompany.name @></td>
        <td><@= item.city.name+item.district.name+item.street.name+item.location @></td>
        <td><@= item.barcode @></td>
        <td><@= item.contact @></td>
        <td><@= item.mobiles @></td>
        <td>
            <@ if(item.installMethod == "HAND_FIX") { @>
            手动安装
            <@ } else if(item.installMethod == "MACHINE_FIX") { @>
            机械安装
            <@ } @>
        </td>
        <td><@= getFormatDateByString(item.installTime, "yyyy-MM-dd") @></td>
        <td>
            <@ if(item.material == "PC_BOARD") { @>
            PC板
            <@ } else if(item.material == "KT_BOARD") { @>
            KT板
            <@ } else if(item.material == "PP_BOARD") { @>
            PP板
            <@ } @>
        </td>
        <td><@= item.area @>㎡</td>
        <td>
            <@ if(item.status == true) { @>
            正常
            <@ } else if(item.status == false) { @>
            故障
            <@ } @>
        </td>
        <td>
            <button class="btn btn-primary btn-xs"
                    onclick="oceanModal.openDefault('billboard/item?id=<@= item.id @>&cityId=<@= item.cityId @>&districtId=<@= item.districtId @>')">
                <i class="icon-pencil"></i>
            </button>
            <@ if (item.sensor==""||item.sensor==null) { @>
            <button class="btn btn-success btn-xs"
                    onclick="oceanModal.openDefault('billboard/sensor?id=<@= item.id @>')">对应传感器
            </button>
            <@ } @>
            <button class="btn btn-danger btn-xs"
                    onclick="billboardPage.drop('<@= item.id @>')">
                <i class="icon-trash "></i>
            </button>
            <a href="billboard/mapInfo?address=<@= item.city.name+item.district.name+item.street.name+item.location @>" class="btn btn-success btn-xs">分布</a>
        </td>
        <td>
            <@ if (item.bid!=""&&item.bid!=null) { @>
            <button class="btn btn-info btn-xs"
                    onclick="window.open('data/item?id=<@= item.id @>')">原始数据
            </button>
            <@ } @>
        </td>
    </tr>
    <@ }); @>
</script>
<script type="text/template" id="billboard-page-template">
    <@ for(var index=1;index<=totalPages;index++) { @>
    <@ if(number==index-1) {@>
    <li class="active"><a href="javascript:void(0)" data-index="<@=index @>"><@=index @></a></li>
    <@ } else { @>
    <li><a href="javascript:void(0)" data-index="<@=index @>"><@=index @></a></li>
    <@ }} @>
</script>
<script type="application/javascript">
    function load(page) {
        if (page == null) {
            page = 1;
        }
        $('#start').val("");
        $('#end').val("");
        WaitingDialog.show();
        $.post("resources/billboard/list", {page: page}, function (data) {
            console.log(data);
            WaitingDialog.dismiss();
            if (data == null) {
                return;
            }
            var tmpl = _.template($('#billboard-list-template').html());
            $('#billboard-list-body').html(tmpl({items: data.content}));

            var tmpl_page = _.template($('#billboard-page-template').html());
            $('.pagination').html(tmpl_page({totalPages: data.totalPages, number: data.number}));

            $('.pagination a').click(function () {
                load($(this).data("index"));
            });
        });
        WaitingDialog.show();
        $.post("resources/adCompany/val", {}, function (data) {
            console.log(data);
            reloadSelectOptions(data);
            WaitingDialog.dismiss();
        });
    }
    load();

    var billboardPage = {
        drop: function (id) {
            if (confirm("确定要删除吗？")) {
                var url = "resources/entity";
                var obj = "com.ocean.billboard.entity.Billboard";
                WaitingDialog.show();
                request.deleteEntity(url, obj, id,
                    function (data) {
                        WaitingDialog.dismiss();
                        toast.success('删除成功');
                        load();
                    }, function (data) {
                        WaitingDialog.dismiss();
                        toast.error('删除失败：' + JSON.stringify(data));
                    });
            }
        },
        select: function (page) {
            if (page == null) {
                page = 1;
            }
            var city, district, street, location, status;
            city = $('#city').val();
            district = $('#district').val();
            street = $('#street').val();
            location = $('#location').val();
            status = $('#status').val();
            WaitingDialog.show();
            $.post("resources/billboard/select", {
                city: city,
                district: district,
                street: street,
                location: location,
                status: status,
                adCompanyId: "",
                page: page
            }, function (data) {
                console.log(data);
                WaitingDialog.dismiss();
                if (data == null) {
                    return;
                }
                var tmpl = _.template($('#billboard-list-template').html());
                $('#billboard-list-body').html(tmpl({items: data.content}));

                var tmpl_page = _.template($('#billboard-page-template').html());
                $('.pagination').html(tmpl_page({totalPages: data.totalPages, number: data.number}));

                $('.pagination a').click(function () {
                    billboardPage.select($(this).data("index"));
                });
            });
        }
    };

    function reloadSelectOptions(data) {
        $('#adCompanyId').empty();
        $('#adCompanyId').append('<option value=""></option>');
        $.each(data, function (index, item) {
            $('#adCompanyId').append('<option value="' + item.id + '">' + item.name + '</option>');
        });
    }

    function districtIdSelect() {
        $('#district').empty();
        $('#street').empty();
        var parentId = $('#city').val();
        WaitingDialog.show();
        $.post("resources/billboardAddress/child", {parentId: parentId, level: 2}, function (data) {
            WaitingDialog.dismiss();
            loadDistrictId(data);
        });
    }

    function streetIdSelect() {
        $('#street').empty();
        var parentId = $('#district').val();
        WaitingDialog.show();
        $.post("resources/billboardAddress/child", {parentId: parentId, level: 3}, function (data) {
            WaitingDialog.dismiss();
            loadStreetId(data);
        });
    }

    function loadDistrictId(data) {
        $('#district').append('<option value=""></option>');
        $.each(data, function (index, item) {
            $('#district').append('<option value="' + item.id + '">' + item.name + '</option>');
        });
    }

    function loadStreetId(data) {
        $('#street').append('<option value=""></option>');
        $.each(data, function (index, item) {
            $('#street').append('<option value="' + item.id + '">' + item.name + '</option>');
        });
    }
</script>
<script src="static/assets/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="static/assets/bootstrap-daterangepicker/date.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#date1').daterangepicker({
            timePicker: true,
            format: 'yyyy-MM-dd'
        }, function(start, end, label) {
            $('#start').val(start.format('yyyy-MM-dd'));
            $('#end').val(end.format('yyyy-MM-dd'));
        });
    })
</script>
</html>
